<template>
  <div v-loading="loading" class="app-container">
    <div class="header_title_box">
      <h2>仓储费明细</h2>
    </div>
    <!-- 搜索 -->
    <div>
      <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch">
        <div class="mb10">
          <el-button size="mini" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
            搜索
          </el-button>
          <el-button size="mini" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
        </div>
      </form-selections>
    </div>
    <div v-action="'Settlement@storageProductFeeExport'" class="operation_button_box">
      <el-button :loading="exportLoading" size="middle" type="primary" @click="handleExport">导出</el-button>
    </div>
    <el-table :data="data" border fit :max-height="screenHeigh">
      <el-table-column type="selection" width="51" align="center" />
      <el-table-column label="虚拟仓库名称" prop="virtual_warehouse" align="center" width="169" />
      <el-table-column label="系统sku" prop="goods_code" align="center" width="135" />
      <el-table-column label="商品名称" prop="goods_name" align="center" width="169" />
      <el-table-column label="采购批次" prop="batch_no" align="center" width="185" />
      <el-table-column label="入库时间" prop="warehousing_time" align="center" min-width="167" />
      <el-table-column label="发生时间" prop="created_at" align="center" min-width="150" />
      <el-table-column label="即时库存" prop="storage_number" align="center" width="100" />
      <el-table-column label="在库时长" prop="storage_days" align="center" min-width="100" />
      <!-- <el-table-column label="所在仓库" prop="virtual_warehouse" align="center" width="267" /> -->
      <!-- <el-table-column label="所属组织" prop="department" align="center" width="222" /> -->
      <el-table-column label="仓储费用（USD）" prop="fee" align="center" min-width="150" />
      <el-table-column label="扣减额度" prop="quota" align="center" min-width="100" />
    </el-table>
    <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[50, 100, 200, 500]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <div class="dialog-footer-center">
      <span>
        <el-button type="primary" @click="handleCancel">返回</el-button>
      </span>
    </div>
    <!--下载字段选择-->
    <DownModul :url="exportUrl" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="导出字段选择" :options-modul="optionsModul" />
  </div>
</template>

<script>
import { action } from '@/directive/permission/index.js' // 权限判断指令
// import { downloadxlsx } from '@/utils/index'
import DownModul from '@/components/DownModul/index.vue'
import formOperate from '@/layout/mixin/formOperate'
export default {
  name: 'StorageFeeInfo',
  components: { DownModul },
  directives: {
    action
  },
  mixins: [formOperate],
  data() {
    return {
      otherHeight: 380,
      isActive: false,
      downLoadParams: {},
      id: '',
      department_id: '',
      queryParam: {
        goods_code: '',
        goods_name: '',
        start_at_creat: '',
        end_at_creat: '',
        page: 1,
        limit: 50,
        dateCreat: []
      },
      formItems: [
        {
          label: '商品编号',
          key: 'goods_code',
          type: 'input',
          placeholder: '请输入商品编号'
        },
        {
          label: '商品名称',
          key: 'goods_name',
          type: 'input',
          placeholder: '请输入商品名称'
        },
        {
          label: '发生时间',
          key: 'dateCreat',
          type: '',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          placeholder: '请选择时间范围'
          //   wrap: true
        }
      ],
      data: [],
      loading: false,
      paginate: {
        sizes: [50, 100, 200, 500],
        limit: 50,
        layout: 'prev, pager, next, sizes',
        current: 0,
        total: 0
      }, // page 数据
      exportLoading: false,
      formVisibleDown: false,
      exportUrl: '/settlement/storage-product-fee-export',
      optionsModul: [
        {
          key: 'goods_code',
          label: '商品编码'
        },
        {
          key: 'goods_name',
          label: '商品名称'
        },
        {
          key: 'batch_no',
          label: '采购批次'
        },
        {
          key: 'virtual_warehouse',
          label: '所在仓库'
        },
        {
          key: 'company',
          label: '所属公司'
        },
        {
          key: 'storage_number',
          label: '即时库存'
        },
        {
          key: 'warehousing_time',
          label: '入库时间'
        },
        {
          key: 'storage_days',
          label: '在库时长（天）'
        },
        {
          key: 'fee',
          label: '仓储费用'
        },
        {
          key: 'quota',
          label: '扣减额度'
        },
        // created_at
        {
          key: 'created_at',
          label: '发生时间'
        }
      ]
    }
  },
  // computed: {
  //   downLoadParams() {
  //     const params = {}
  //     const object = this.queryParam
  //     for (const key in object) {
  //       if (Object.hasOwnProperty.call(object, key)) {
  //         const element = object[key]
  //         params[key] = element
  //       }
  //     }
  //     params['department_id'] = this.department_id
  //     params['id'] = this.id
  //     return params
  //   }
  // },
  created() {
    const vm = this
    vm.id = vm.$route.params.id
    vm.department_id = vm.$route.query.department_id
    vm.queryParam.department_id = vm.department_id
    vm.queryParam.id = vm.id

    vm.getList()
  },
  methods: {
    handleSearch() {
      this.queryParam.page = 1
      this.getList()
    },
    // 导出
    handleExport() {
      const vm = this
      const { goods_code, goods_name, start_at_creat, end_at_creat, department_id } = vm.queryParam
      const id = vm.id
      const params = { goods_name, goods_code, id, start_at_creat, end_at_creat, department_id }
      //   vm.handleExportxlsx(vm.exportUrl, params)
      vm.downLoadParams = params
      vm.downLoadParams['department_id'] = this.department_id
      vm.downLoadParams['id'] = this.id
      vm.formVisibleDown = true
    },
    // 导出
    // handleExport() {
    //   const vm = this
    //   vm.exportLoading = true
    //   vm.$http
    //     .get(`/settlement/storage-product-fee-export/${vm.id}`, {
    //       params: vm.queryParam
    //     })
    //     .then(res => {
    //       downloadxlsx(res.data)
    //       vm.exportLoading = false
    //     })
    //     .catch(() => {
    //       vm.exportLoading = false
    //     })
    // },

    // 获取详情
    getList() {
      const vm = this
      vm.loading = true
      vm.queryParam.start_at_creat = ''
      vm.queryParam.end_at_creat = ''
      // 生成日期转化
      if (vm.queryParam.dateCreat && vm.queryParam.dateCreat.length > 0) {
        vm.queryParam.start_at_creat = vm.queryParam.dateCreat[0]
        vm.queryParam.end_at_creat = vm.queryParam.dateCreat[1]
      }
      vm.$http
        .get(`/settlement/storage-product-fee/${vm.id}/${vm.department_id}`, {
          params: vm.queryParam
        })
        .then((res) => {
          vm.data = res.data
          this.handlePaginateResponse(res)
          vm.loading = false
        })
        .catch(() => {
          vm.loading = false
        })
    },
    handleSizeChange(val) {
      this.handlePaginateParams(val)
    },
    handleCurrentChange(val) {
      this.handlePaginateParams(0, val)
    },
    // 处理分页参数
    handlePaginateParams(limit = 0, page = 0) {
      if (limit) {
        this.queryParam.limit = limit
        this.paginate.limit = limit
      }
      if (page) {
        this.queryParam.page = page
        this.paginate.current = page
      }
      this.getList()
    },
    handlePaginateResponse(response) {
      if (response.limit !== undefined) {
        this.paginate.total = response.count
        this.paginate.limit = response.limit
        this.paginate.current = response.current
      }
    },
    handleRefresh() {
      const vm = this
      vm.queryParam.goods_code = ''
      vm.queryParam.goods_name = ''
      vm.queryParam.dateCreat = []
      vm.queryParam.end_at_creat = ''
      vm.queryParam.start_at_creat = ''
      vm.queryParam.page = 1
      vm.getList()
    },
    handleCancel() {
      const vm = this
      vm.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped></style>
